<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="box"></div>

    <div>
        <p></p>
        <p></p>
        <p></p>
        <section></section>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
    <script>
        //----- 文档处理
        //append
        //appendTo

        // $('#box').append($('<span>').html('这是span的元素内容'))
        //     .css('color', 'red')
        //     .children('span')
        //     .css('background-color', 'green');

        //链式调用
        // $('<span>')
        //     .appendTo($('div'))
        //     .css('color', 'pink')
        //     .parent($('div'))
        //     .css({ 'width': '200px', "height": '200px', 'border': '1px solid' })

        // $('p').insertAfter($('section'))


        // $("p").wrap("<div class='wrap'></div>");
        $('div').wrap("<header id='test'></header>")
    </script>
</body>

</html>